<!--
 作者：ex_baiyc
 日期：2016-11-10
 功能：折线图组件
 参数：'chartWidth', 'chartHeight', 'chartData'
 事件：将父组件中传递过来的 chartData 赋值给图表
-->
<template>
  <div class="chart-view">
    <div v-if="chartData.series[0].data.length > 1" :id="chartContainerId" :style="{width: chartWidth, height: chartHeight}">
    </div>
    <!-- <div class="nodata-wrap" > -->
      <!-- <div class="item-data" v-else>暂无相关数据!</div> -->
    <!-- </div> -->
  </div>
</template>

<script>
//  import Echarts from 'echarts/lib/echarts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'

//  var len = 0
  export default{
    props: ['chartWidth', 'chartHeight', 'chartData'],
    data () {
      return {
        myChart: {},
        chartContainerId: 'chart-view-container-' + new Date().getMilliseconds()
      }
    },
    events: {},
    ready: function () {
    },
    watch: {
      'this.chartData.series[0].data': function () {
        var dataOption = {
          tooltip: {
            trigger: 'axis',
//            extraCssText: 'background: #fff;color:#000;box-shadow:1px 1px 3px #999;z-index:99;'
            extraCssText: 'z-index:1;',
            position: function (point, params, dom) {
              if (point[0] > 100 && point[0] < 300) {
                return ['20%', '50%']
              }
            }
          },
          legend: {
            show: true,
            data: this.chartData.legend,
            itemWidth: 11,
            itemHeight: 11,
            itemGap: 10,
            left: 'center',
            top: 8
          },
          grid: {
            show: true,
            top: '20%',
            left: '11%',
            right: '11%',
            bottom: '6%',
            containLabel: true,
            backgroundColor: 'rgba(244, 249, 255, 0.4)',
            borderWidth: 0
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#4A90E2'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              },
              interval: this.chartData.xAxisData.length - 2
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            data: this.chartData.xAxisData
          },
          yAxis: {
            name: this.chartData.yAxisName,
            nameGap: 1,
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#4A90E2'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: false
            }
          },
          color: this.chartData.colors,
          series: this.chartData.series
        }
        this.$nextTick(function () {
          var chartContainer = document.getElementById(this.chartContainerId)
          if (chartContainer) {
            this.myChart = window.Echarts.init(chartContainer)
            this.myChart.setOption(dataOption)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .chart-view {
    position: relative;
  }
</style>
